<template>
    <el-container>
        <el-aside width="200px">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item v-for="(item, index) in data" :key="index" :index="item.label" @click="showPro(index+1)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.label}}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-container>
            <project :projectData="projectData"></project>
        </el-container>
    </el-container>
</template>
<script>
import Project from "@/components/project/project";
import axios from "axios";
const ERR_OK = 1;
export default {
  data() {
    return {
      data: [
        {
          label: "进行中的项目"
        },
        {
          label: "已完成的项目"
        }
      ],
      projectData: []
    };
  },
  created() {
    this.$nextTick(() => {
      this._getProjectData(1)
    });
  },
  methods: {
    _getProjectData(index) {
      console.log(index);
      const url = "api/project/proList.html";
      axios
        .post(url, {
          pr_status: index
        })
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.projectData = res.data.data;
            console.log(this.projectData);
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    showPro(index) {
      this._getProjectData(index);
    }
  },
  components: {
    Project
  }
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.el-menu-vertical-demo
  text-align left
  height 1000px
</style>
